<template>
  <div>
    <!-- 租金 -->
    <van-field
      v-model.trim="valueRent"
      placeholder="请输入租金/月"
      @blur="onBlurRent"
    >
      <template #label>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</template>
      <template #right-icon>￥/月</template>
    </van-field>
    <!-- 建筑面积 -->
    <van-field
      v-model.trim="valueBuild"
      placeholder="请输入建筑面积"
      @blur="onBlurBuild"
    >
      <template #label>建筑面积</template>
      <template #right-icon>㎡</template>
    </van-field>
    <!-- 户型 -->
    <van-cell
      is-link
      :value="isHouseType ? isHouseType : '请选择'"
      @click="onHouseType"
    >
      <template #title>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</template>
    </van-cell>
    <!-- 所在楼层 -->
    <van-cell
      title="所在楼层"
      is-link
      :value="isFloor ? isFloor : '请选择'"
      @click="$emit('show-floor')"
    />
    <!-- 朝向 -->
    <van-cell
      is-link
      :value="isOrientation ? isOrientation : '请选择'"
      class="last-cell"
      @click="$emit('show-rientation')"
    >
      <template #title>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</template>
    </van-cell>
    <!-- 房屋标题 -->
    <div class="house-title">
      <van-cell title="房屋标题" />
      <van-field
        v-model.trim="valueHouserTitle"
        placeholder="请输入标题 (例如: 整租 小区名 2室 500元)"
        class="house-text"
        @blur="onBlurHouserTitle"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Detailss',
  components: {},
  props: {
    isFloor: {
      type: String
    },
    isHouseType: {
      type: String
    },
    isOrientation: {
      type: String
    }
  },
  data() {
    return {
      valueRent: '',
      valueBuild: '',
      valueHouserTitle: ''
    }
  },
  computed: {
    ...mapState(['rentHouse'])
  },
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['updateRentHouse']),
    // 租金
    onBlurRent() {
      // 非空判断
      if (this.valueRent) {
        const obj = this.rentHouse
        obj.price = this.valueRent
        this.updateRentHouse(obj)
      }
    },
    // 建筑面积
    onBlurBuild() {
      if (this.valueBuild) {
        const obj = this.rentHouse
        obj.size = this.valueBuild
        this.updateRentHouse(obj)
      }
    },
    // 房屋标题
    onBlurHouserTitle() {
      if (this.valueHouserTitle) {
        const obj = this.rentHouse
        obj.title = this.valueHouserTitle
        this.updateRentHouse(obj)
      }
    },
    onHouseType() {
      this.$emit('show-house-type')
    }
  }
}
</script>

<style scoped lang="less">
.last-cell,
.house-text {
  border-bottom: none !important;
}
</style>
